<template>
  <div class="createorder">
     <Header title="生成订单" class=""></Header>
     <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
     <div class="content" >
         <div v-for="(item,index) in store.state.Cart.orderList">
          <van-card
                :num="item.num"
                :price="item.price"
                :title="item.title"
                :thumb="item.pic"
              />
         </div>
     </div>
      <div class="dibu">
        <div class="between">
          <span>商品金额</span>
          <span>￥{{sum}}</span>
        </div>
        <van-button type="primary" block class="dingdan" @click="createdan">生成订单</van-button>
      </div>
  </div>
</template>

<script  setup>
import Header from '@/components/Header.vue'
import { computed, reactive, ref } from 'vue';
//提示框
import { Toast } from 'vant';
//仓库引用
import { useStore } from 'vuex'
let store =useStore()
// 路由引入
import { useRouter } from 'vue-router';
let router=useRouter()
//引入弹窗组件
import { Dialog } from 'vant';
const tel = ref('13000000000');
const name = ref('张三');
const onEdit = () => {
  router.push('/address')
};

import { useRoute } from 'vue-router';
let route=useRoute()
console.log(route)
const sum=computed(()=>{
  let price=0
  if(store.state.Cart.orderList.length)
   {

    store.state.Cart.orderList.forEach(item => {
       return price+=item.price*item.num
    });
   }
   return price
})

const createdan=()=>{
  Dialog.alert({
  message: '订单已完成',
}).then(() => {
  let newList=store.state.Cart.cartList.filter((item)=>{
    return !route.query.list.includes(item.id+'')
  })
  store.commit('Delete',newList)
  store.commit('update')
  router.push('/order')
});
}
</script>

<style scoped lang="less">
.createorder{
  height: 100%;
  display: flex;
  flex-direction: column
}
.content{
  flex: 1;
  overflow-y: auto;
}
.dibu{
  background-color: #fff;
  border-top: 1px solid #555;
  padding: 10px 20px 10px 20px;
 

  .between{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    line-height: 30px;
    
    span:nth-child(1){
      font-size: 14px;
      font-weight: bold;
      
    }
    span:nth-child(2){
      font-size: 20px;
      color: red;
    }
  }

  .dingdan{
    background-color: #ffc400;
    border: none;
  }
}
</style>
